{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <!-- 引入 layui.css -->
    <link href="{%static '/css/layui.css'%}" rel="stylesheet">
    <link href="{%static '/css/index.css'%}" rel="stylesheet">
<style>
.demo-login-container{width: 320px; margin: 21px auto 0;}
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
    <!-- 引入 layui.js -->
    <script src="{%static '/js/layui.min.js'%}"></script>
    <script>
        layui.use(['layer','jquery','table'],function(){
            var layer = layui.layer;
            var table = layui.table;
            $ = layui.jquery;

            $("#btnregister").click(function(){
               if($("#pwd").val()!=$("#confirmPassword").val()){
                   layer.msg("两次输入的密码不同,请重新输入");
                   $("#pwd").val("")
                   $("#confirmPassword").val("")
                   return ;
               }
               url = "/api/user/staruser/"
               $.ajax({
                   url:url,
                   type:'post',
                   data:{
                       "username":$("#username").val(),
                       "pwd":$("#pwd").val()
                   },
                   dataType:"json",
                   success:function(res){
                       if(res.code==200){
                           layer.msg(res.msg,{icon:1,time:2*1000,shade:0.4},function(){
                               location.href="/login/?username="+res.data.username;
                           });
                       }
                       else{
                           layer.msg(res.msg,{time:2*1000});
                       }
                   }
               })
            });

        });
    </script>
</head>
<body>
    <div id="fullscreen">
        {% csrf_token %}
        <div style="width:100%;height:80%;margin:0 0 auto auto;">
            <h1>用户注册</h1>
            <form class="layui-form" style="margin-top:150px;">
              <div class="demo-login-container">
                  <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-username"></i>
                    </div>
                      <input type="text" id="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请输入用户名" autocomplete="off" class="layui-input">
                  </div>
                  <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-password"></i>
                    </div>
                        <input type="password" id="pwd" name="pwd" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                  </div>
                  <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-password"></i>
                    </div>
                        <input type="password" id="confirmPassword" name="confirmPassword" value="" lay-verify="required" placeholder="确认密码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                  </div>
                  <button id="btnregister" type="button" class="layui-btn">注册</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>